<template>
    <div class="detail">
        <div class="img">
            <!-- css3 backgroundSize 属性 -->
            <van-image lazy-load fit="cover" :src="film.poster" />
        </div>
        <div class="film-detail">
            <div>{{ film.name }}</div>
            <div>{{ film.category }}</div>
            <div>{{ parsePremiereAt(film.premiereAt) }}上映</div>
            <div>{{ film.nation }} | {{ film.runtime }} 分钟</div>
            <div>
                {{ film.synopsis }}
            </div>
        </div>

        <h2 style="font-size: 16px;color: #666;margin: 10px;">演职人员</h2>
        <van-swipe :loop="false" :width="120" class="swiper-box" :show-indicators="false">
            <van-swipe-item v-for="(item, index) in film.actors" :key="'actor' + index" class="swiper-slide">
                <van-image :src="item.avatarAddress" height="95px" width="95px" fit="cover" position="center" />
                <div style="font-size: 8px;width: 95px;text-align: center;margin-top: 12px;">{{ item.name }}</div>
                <div style="font-size: 8px;width: 95px;text-align: center;margin-top: 5px;">{{ item.role }}</div>
            </van-swipe-item>
        </van-swipe>

        <h2 style="font-size: 16px;color: #666;margin: 10px;">演职人员</h2>
        <swiper :slides-per-view="4" :space-between="50" class="swiper-box">
            <swiper-slide v-for="(item, index) in film.actors" :key="index" class="swiper-slide">
                <div>
                    <van-image width="95px" height="95px" fit="cover" position="center" :src="item.avatarAddress" />
                    <div style="font-size: 8px;width: 95px;text-align: center;margin-top: 12px;">{{ item.name }}</div>
                    <div style="font-size: 8px;width: 95px;text-align: center;margin-top: 5px;">{{ item.role }}</div>
                </div>
            </swiper-slide>
        </swiper>

        <h2 style="font-size: 16px;color: #666;margin: 10px;">剧照</h2>
        <swiper :slides-per-view="2" :space-between="50" class="swiper-box">
            <swiper-slide v-for="(item, index) in film.photos" :key="index" class="swiper-slide"
                @click="showPreview(index)">
                <van-image width="195px" height="120px" fit="cover" position="center" :src="item" />
            </swiper-slide>
        </swiper>


    </div>
</template>

<script setup lang="ts">
// 1. 先把 HTML、CSS 静态页面结构写好
// 2. 配置对应的 API 接口，可以使用 postMan 进行测试
import { onMounted, ref, onUnmounted } from 'vue';
import { moiveDetailData } from '../api/apis'
import { useRoute } from 'vue-router';
import { FilmType } from '../types'
import moment from 'moment'
import $Bus from '../tool/eventBus'

// 导入第三方专业 swper 插件仓库
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';
import { showImagePreview } from 'vant';
import 'vant/es/image-preview/style';
import { onDeactivated } from 'vue';


// 3. 调用接口得到数据，创建响应式数据对象接收数据，渲染基础页面
// 立即执行函数、创建一个方法再调用、基于 onMounted 生命周期钩子函数
// 我们可以给到初始值，让程序更加的严谨
const film = ref<FilmType>({
    poster: "",
    name: "",
    category: "",
    premiereAt: 0,
    nation: "",
    runtime: "",
    synopsis: "",
    actors: [],
    photos: []
})
const route = useRoute();
onMounted(async () => {
    let res = await moiveDetailData(route.params.id as string);
    console.log(res.data.film);

    film.value = res.data.film;
})

// 4. 进行数据清洗格式化相关操作
// 在 Vue3 中取消了 过滤器，因为直接调用方法更加直观
const parsePremiereAt = (value: number) => {
    return moment(value * 1000).format("YYYY-MM-DD")
}

// 5. 调用第三方仓库、插件 完善细节功能
// 性能优化   图片懒加载
// 特效实现   无缝轮播
// 功能细节   底部 TabBar 的控制
const showPreview = (index: number) => {
    showImagePreview({
        images: film.value.photos as string[],
        startPosition: index,
        closeable: true,
        showIndicators: true
    });
}
$Bus.emit("tabBarContral", false)

onUnmounted(() => {
    $Bus.emit("tabBarContral", true)
})

// 如果使用了 keep-alive 我们进行切换，销毁事件
// onDeactivated(() => { })

</script>


<style scoped lang='scss'>
.detail {
    padding-bottom: 120px;

    .img {
        width: 100%;
        height: 260px;

        // 当咱们第三方 UI 仓库提供的样式，需要进行自定义修改的时候，需要使用 样式穿透
        ::v-deep .van-image__img {
            width: 100vw;
            height: 260px;
        }
    }

    .swiper-box {
        margin: 0 10px;
    }
}
</style>